<template>
	<view class="container-year" style="padding-bottom: 100rpx;">
		<!--  margin-top: 20rpx; margin-left: 20rpx; margin-right: 20rpx; -->
		<view class="year" style="height: 100%;padding-left: 20rpx;padding-right: 20rpx;padding-top: 50rpx;">
			<view class="" style="height: 236rpx; width: 100%;text-align: center;padding: 0 10px;">
				<img style="width: 100%;height: 100%;" src="../static/biaoti.png" alt="">
			</view>
			<!--上半部分 margin-top: 336rpx;-->
			<view class="" style="display: flex;justify-content: center;">
				<view style="color: #fff;font-size: 32rpx ;font-weight: bold;text-align: center;margin-bottom:30rpx;padding-top: 30rpx;font-weight: bold; padding-top: 10rpx;padding-bottom: 10rpx;position: relative;
					    margin-bottom: -30rpx; border-radius: 30rpx;background-color: #41AEFC;width: 70%;">
					{{reportDetailData.title || ""}}
				</view>
			</view>


			<view class="bottom"
				style="font-size:28rpx;padding-bottom: 20rpx;border-radius: 10rpx;background-color: #fff;padding-top: 50rpx;padding-bottom: 40rpx;">
				<!-- reportDetailData.quest_sum -->
				<uni-section class="mb-10" value="问卷总次数: " :rightContent="2+' 次 '" :isBorder="true"
					:fontWeight="'bold'">
				</uni-section>
				<view class="">
					<uni-section class="mb-10" value="全国排名" :rightContent="35+' 名'" :pieceColor="'#ffffff'"
						:isBorder="true" :color="'#FCBC4B'"> </uni-section>
				</view>
				<view class="">
					<uni-section class="mb-10" value="本省排名" :rightContent="2+' 名'" :pieceColor="'#ffffff'"
						:isBorder="true" :color="'#ff5500'"> </uni-section>
				</view>
				<view class="">
					<uni-section class="mb-10" :value="reportDetailData.province_whole" :pieceColor="'#ffffff'"
						:isBorder="true" :color="'#41AEFC'" :fontWeight="'bold'"> </uni-section>
				</view>
				<view class="">
					<!-- reportDetailData.keep_sum -->
					<uni-section class="mb-10" value="记账总次数" :rightContent="2+' 次 '" :isBorder="true"
						:fontWeight="'bold'"> </uni-section>
				</view>
				<view class="">
					<uni-section class="mb-10" value="全国排名" :rightContent="33+' 名'" :pieceColor="'#ffffff'"
						:isBorder="true" :color="'#FCBC4B'"> </uni-section>
				</view>
				<view class="">
					<uni-section class="mb-10" value="本省排名" :rightContent="3+' 名'" :pieceColor="'#ffffff'"
						:isBorder="true" :color="'#ff5500'"> </uni-section>
				</view>
				<!-- <view class="">
					<uni-section class="mb-10" :value="reportDetailData.ranking" :pieceColor="'#ffffff'"
						:rightContent="reportDetailData.ranking" :isBorder="true" :color="'#FCBC4B'"> </uni-section>
				</view> -->
				<view class="">
					<uni-section class="mb-10" :value="reportDetailData.transcend" :pieceColor="'#ffffff'"
						:isBorder="true" :color="'#41AEFC'" :fontWeight="'bold'"> </uni-section>
				</view>
				<view class="">
					<uni-section class="mb-10"
						:value=" reportDetailData.onthly?reportDetailData.onthly:'   ' + reportDetailData.country?reportDetailData.country+ '   ':'' + reportDetailData.percentage?reportDetailData.percentage:'   ' "
						:pieceColor="'#ffffff'" :isBorder="true" :color="'#00c760'"> </uni-section>
				</view>
			</view>

			<view class="" style="display: flex;margin-top: 20px;justify-content: center;">
				<view style="color: #fff;font-size: 32rpx ;font-weight: bold;text-align: center;margin-bottom:30rpx;padding-top: 30rpx;font-weight: bold; padding-top: 10rpx;padding-bottom: 10rpx;position: relative;
            		    margin-bottom: -56rpx; border-radius: 30rpx;background-color: #41AEFC;width: 70%;">
					{{reportDetailData.title_book || ""}}
				</view>
			</view>
			<!--下半部分 -->
			<view class="top" style="border-radius: 10rpx;margin-top: 20rpx;background-color: #fff;">
				<view class="">
					<uni-ec-canvas class="uni-ec-canvas" id="line-chart1" ref="canvas2" canvas-id="lazy-load-chart"
						:ec="ec2">
					</uni-ec-canvas>
				</view>
				<view style="padding-left: 20rpx;">
					<view class="">
						<view class=""
							style="display: flex;justify-content: space-between;padding: 20rpx 60rpx 20rpx 36rpx;">
							<view class=""
								style=" flex:1;font-size:30rpx;font-weight: bold;display: flex;flex-direction: column;border-left: 3px solid #D6D8E5;justify-content: space-between;padding-left: 10rpx;">
								<text style="padding-bottom: 20rpx;">出游总花费 :</text>
								<text>{{(Number(reportDetailData.cantuanyou_money)+Number(reportDetailData.ziyou_money) ) +"元"}}</text>
							</view>
							<view class=""
								style="flex:1;display: flex;flex-direction: column;justify-content: space-between;">
								<p style="font-size:25rpx;">全国排名: 33名</p>
								<p style="font-size:25rpx;">本省排名: 3名</p>
								<p style="font-size:25rpx;">{{reportDetailData.more || ""}}</p>
								<!-- 	<p style="font-size:25rpx;margin-bottom: 10rpx">{{reportDetailData.what || ""}}</p>
								<p style="font-size:25rpx;">{{reportDetailData.more || ""}}</p> -->
							</view>
						</view>
						<view class="">
							<uni-ec-canvas class="uni-ec-canvas" id="line-chart" ref="canvas3"
								canvas-id="lazy-load-chart" :ec="ec3">
							</uni-ec-canvas>
						</view>

						<view class=""
							style="display: flex;justify-content: space-between;padding: 20rpx 30rpx 20rpx 36rpx;">
							<view class=""
								style="flex:1;font-size:30rpx;font-weight: bold;display: flex;flex-direction: column;border-left: 3px solid #D6D8E5;justify-content: space-between;padding-left: 10rpx;">
								<text style="padding-bottom: 20rpx;">自由行总花费 :</text>
								<text>{{reportDetailData.ziyou_money+"元"}}</text>
							</view>
							<view class=""
								style="flex:1;display: flex;flex-direction: column;justify-content: space-between;">
								<p style="font-size:25rpx;">
									全国排名: 33名
								</p>
								<p style="font-size:25rpx;">
									本省排名: 21名
								</p>
								<p style="font-size:25rpx;">{{reportDetailData.users || ""}}</p>
								<!-- <p style="font-size:25rpx;margin-bottom: 10rpx">
									{{reportDetailData.indepen || ""}}
								</p>
								<p style="font-size:25rpx;">{{reportDetailData.users || ""}}</p> -->
							</view>
						</view>
					</view>
				</view>
				<view>
					<uni-ec-canvas class="uni-ec-canvas" id="line-chart" ref="canvas" canvas-id="lazy-load-chart"
						:ec="ec">
					</uni-ec-canvas>
				</view>
				<view
					style="font-size:25rpx;text-align: center;margin-bottom: 40rpx;font-weight: bold;padding-left: 20rpx;margin-top: 35rpx;color:#41AEFC">
					<text>{{reportDetailData.among || ""}}</text>
				</view>


				<view class="" style="display: flex;justify-content: space-between;padding: 30rpx 100rpx 30rpx 50rpx;">
					<view class=""
						style="flex:1;font-size:30rpx;font-weight: bold;display: flex;flex-direction: column;border-left: 3px solid #D6D8E5;justify-content: space-between;padding-left: 10rpx;">
						<text style="padding-bottom: 20rpx;">参团游总花费 : </text>
						<text>{{reportDetailData.cantuanyou_money+"元"}}</text>
					</view>
					<view class="" style="display: flex;flex-direction: column;justify-content: space-between;">
						<!-- <p style="flex:1;font-size:25rpx;margin-bottom: 10rpx">{{reportDetailData.ranking || ""}}</p> -->
						<p style="font-size:25rpx;">
							全国排名: 33名</p>
						<p style="font-size:25rpx;">
							本省排名: 3名
						</p>
						<p style="font-size:25rpx;">{{reportDetailData.transcend || ""}}</p>
					</view>
				</view>

				<view style="">
					<uni-ec-canvas class="uni-ec-canvas" id="line-chart1" ref="canvas1" canvas-id="lazy-load-chart"
						:ec="ec1">
					</uni-ec-canvas>
				</view>

				<view
					style="margin 10rpx 0;font-size:25rpx;text-align: center;margin-bottom: 40rpx;font-weight: bold;padding-left: 20rpx;margin-bottom:30rpx;margin-top:30rpx;color:#41AEFC">
					<text>{{reportDetailData.front || ""}}</text>
				</view>
				<view
					style="margin-top: 140rpx;background-color:#fff;border-radius: 10rpx;padding-bottom:20rpx;color: #bcbcbc;font-size:30rpx;padding:20rpx;font-size:23rpx;display: flex;justify-content: center;">
					声明：以上内容统计数据均来自《旅游记账和调研》内部样本
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 此处将路径替换为你放置该组件的路径  
	import uniEcCanvas from '../js_sdk/yanhao-echarts-for-wx/uni-ec-canvas/uni-ec-canvas.vue'
	import * as echarts from '../js_sdk/yanhao-echarts-for-wx/uni-ec-canvas/echarts.min.js'
	import util from '../../../utils/util.js';
	import uniSection from '@/components/uni-section/uni-section.vue'
	export default {
		components: {
			uniEcCanvas,
			uniSection
		},
		data() {
			return {
				status: 'nomore',
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '实在没有了',
				// 自由行参团有百分比图表
				ec2: { //图表数据
					lazyLoad: true,
					option: {
						title: { //标题组件
							text: '',
							left: '45%',
							top: '50%',
							textStyle: {
								color: "#333333",
								fontSize: 12,
							}
						},
						tooltip: { //设置点击时提示框
							trigger: 'item', // trigger 设置触发类型，默认数据触发，可选值：'item' ¦ 'axis'
							position: 'top',
							showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
							hideDelay: 20, // 隐藏延迟，单位ms
							backgroundColor: '#717171', // 提示框背景颜色
							// 防止在容器正中间  postion：【’50%，‘50%’】
							position: [10, 10], //提示浮层框的位置，默认不设置位置回跟随鼠标的位置移动  绝对位置，相对于容器左侧10px，上册10px   
							textStyle: {
								fontSize: '16px',
								color: '#FFF' // 设置文本颜色 默认#FFF
							},
							formatter: ' {b} : {c} 次 ({d}%)' // formatter设置提示框显示内容// {a}指series.name  {b}指series.data的name// {c}指series.data的value  {d}%指这一部分占总数的百分比
						},
						grid: {
							left: '6%',
							right: '6%',
							top: '6%',
							bottom: '6%',
							containLabel: true
						},
						series: [{
							name: '饼状图', //设置饼图名称
							type: 'pie', //设置图表类型
							radius: ['25', '40%'], // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小 [ default: [0, '75%'] ]
							center: ["53%", "55%"], // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置
							color: [],
							itemStyle: { //去掉图形外面的横线和文字不显示
								normal: {
									label: {
										show: true,
									},
									labelLine: {
										show: true,
									}
								}
							},
							data: []
						}]
					}
				},
				// 自由行总花费参团游总花费图表
				ec3: { //图表数据
					lazyLoad: true,
					option: {
						title: { //标题组件
							text: '',
							left: '45%',
							top: '50%',
							textStyle: {
								color: "#333333",
								fontSize: 13,
							}
						},
						tooltip: { //设置点击时提示框
							trigger: 'item', // trigger 设置触发类型，默认数据触发，可选值：'item' ¦ 'axis'
							position: 'top',
							showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
							hideDelay: 20, // 隐藏延迟，单位ms
							backgroundColor: '#717171', // 提示框背景颜色
							// 防止在容器正中间  postion：【’50%，‘50%’】
							position: [10, 10], //提示浮层框的位置，默认不设置位置回跟随鼠标的位置移动  绝对位置，相对于容器左侧10px，上册10px   
							textStyle: {
								fontSize: '16px',
								color: '#FFF' // 设置文本颜色 默认#FFF
							},
							formatter: ' {b} : {c}元 ({d}%)' // formatter设置提示框显示内容// {a}指series.name  {b}指series.data的name// {c}指series.data的value  {d}%指这一部分占总数的百分比
						},
						grid: {
							left: '6%',
							right: '6%',
							top: '6%',
							bottom: '6%',
							containLabel: true
						},
						series: [{
							name: '饼状图', //设置饼图名称
							type: 'pie', //设置图表类型
							radius: ['25', '40%'], // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小 [ default: [0, '75%'] ]
							center: ["53%", "55%"], // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置,
							color: [],
							itemStyle: { //去掉图形外面的横线和文字不显示
								normal: {
									label: {
										show: true,
									},
									labelLine: {
										show: true,
									}
								}
							},
							data: []
						}]
					}
				},
				ec: { //图表数据
					lazyLoad: true,
					option: {
						title: { //标题组件
							text: '',
							left: '45%',
							top: '50%',
							textStyle: {
								color: "#333333",
								fontSize: 13,
							}
						},
						tooltip: { //设置点击时提示框
							trigger: 'item', // trigger 设置触发类型，默认数据触发，可选值：'item' ¦ 'axis'
							position: 'top',
							showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
							hideDelay: 20, // 隐藏延迟，单位ms
							backgroundColor: '#717171', // 提示框背景颜色
							// 防止在容器正中间  postion：【’50%，‘50%’】
							position: [10, 10], //提示浮层框的位置，默认不设置位置回跟随鼠标的位置移动  绝对位置，相对于容器左侧10px，上册10px   
							textStyle: {
								fontSize: '16px',
								color: '#FFF' // 设置文本颜色 默认#FFF
							},
							formatter: ' {b} : {c}元 ({d}%)' // formatter设置提示框显示内容// {a}指series.name  {b}指series.data的name// {c}指series.data的value  {d}%指这一部分占总数的百分比
						},
						grid: {
							left: '6%',
							right: '6%',
							top: '6%',
							bottom: '6%',
							containLabel: true
						},
						series: [{
							name: '饼状图', //设置饼图名称
							type: 'pie', //设置图表类型
							radius: ['25', '40%'], // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小 [ default: [0, '75%'] ]
							center: ["53%", "55%"], // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置
							color: [],
							itemStyle: { //去掉图形外面的横线和文字不显示
								normal: {
									label: {
										show: true,
									},
									labelLine: {
										show: true,
									}
								}
							},
							data: []
						}]
					}
				},

				ec1: { //图表数据
					lazyLoad: true,
					option: {
						title: { //标题组件
							text: '',
							left: '43%',
							top: '49%',
							textStyle: {
								color: "#333333",
								fontSize: 13,
							}
						},
						tooltip: { //设置点击时提示框
							trigger: 'item', // trigger 设置触发类型，默认数据触发，可选值：'item' ¦ 'axis'
							position: 'top',
							showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
							hideDelay: 20, // 隐藏延迟，单位ms
							backgroundColor: '#717171', // 提示框背景颜色
							// 防止在容器正中间  postion：【’50%，‘50%’】
							position: [10, 10], //提示浮层框的位置，默认不设置位置回跟随鼠标的位置移动  绝对位置，相对于容器左侧10px，上册10px   
							textStyle: {
								fontSize: '16px',
								color: '#FFF' // 设置文本颜色 默认#FFF
							},
							formatter: ' {b} : {c}元 ({d}%)' // formatter设置提示框显示内容// {a}指series.name  {b}指series.data的name// {c}指series.data的value  {d}%指这一部分占总数的百分比
						},
						grid: {
							left: '6%',
							right: '6%',
							top: '6%',
							bottom: '6%',
							containLabel: true
						},
						series: [{
							name: '饼状图', //设置饼图名称
							type: 'pie', //设置图表类型
							radius: ['25', '40%'], // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小 [ default: [0, '75%'] ]
							center: ["51%", "55%"], // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置
							color: [],
							itemStyle: { //去掉图形外面的横线和文字不显示
								normal: {
									label: {
										show: true,
									},
									labelLine: {
										show: true,
									}
								}
							},
							data: []
							// label: {
							// 	show: true,
							// 	position: 'inside',数据显示再里面
							// },
						}]
					}
				},

				// 年报详情
				reportDetailData: ""

			}
		},
		onReady() {
			setTimeout(() => { //初始化图表
				this.$refs['canvas'].init() //出游情况图表
				this.$refs['canvas1'].init() //记账情况图表
				this.$refs['canvas2'].init() //自由行参团游次数图表
				this.$refs['canvas3'].init() //自由行参团游次数图表
			}, 1000) // 两秒之后延迟加载  
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			console.log('获取详情id', options.detailId)
			// 获取年报详情
			this.getReportDeatail(options.detailId)
		},
		methods: {
			// 随机颜色

			randomHexColor: function() { //随机生成十六进制颜色
				var hex = Math.floor(Math.random() * 16777216).toString(16); //生成ffffff以内16进制数
				while (hex.length < 6) { //while循环判断hex位数，少于6位前面加0凑够6位
					hex = '0' + hex;
				}
				return '#' + hex; //返回‘#'开头16进制颜色
			},
			// 图表函数出游情况
			hrFun: function(data, year) {
				let colorData = []
				for (var i = 0; i < 8; i++) {
					colorData.push(this.randomHexColor())
				}
				console.log('生成的随机颜色', colorData)

				var _self = this
				_self.ec.option.toolbox = {
					show: true //工具兰是否显示
				}
				_self.ec.option.series[0].data = data
				_self.ec.option.series[0].color = colorData
				_self.ec.option.title.text = year + '年'
			},
			// 图表函数记账情况
			hrFun1: function(data, year) {
				let colorData = []
				for (var i = 0; i < 4; i++) {
					colorData.push(this.randomHexColor())
				}
				var _self = this
				_self.ec.option.toolbox = {
					show: true //工具兰是否显示
				}
				_self.ec1.option.series[0].color = colorData
				_self.ec1.option.series[0].data = data
				_self.ec1.option.title.text = year + '年'
			},
			// 自由行参团游次数
			hrFun2: function(data, year) {
				console.log(' 自由行参团游次数', data)
				let colorData = []
				for (var i = 0; i < 2; i++) {
					colorData.push(this.randomHexColor())
				}
				var _self = this
				_self.ec2.option.toolbox = {
					show: true //工具兰是否显示
				}
				_self.ec2.option.series[0].data = data
				_self.ec2.option.series[0].color = colorData
				_self.ec2.option.title.text = year + '年'
			},
			// 自由行参团游次数
			hrFun3: function(data, year) {
				console.log(' 总花费1111111', data)
				let colorData = []
				for (var i = 0; i < 2; i++) {
					colorData.push(this.randomHexColor())
				}
				var _self = this
				_self.ec3.option.toolbox = {
					show: true //工具兰是否显示
				}
				_self.ec3.option.series[0].data = data
				_self.ec3.option.series[0].color = colorData
				_self.ec3.option.title.text = year + '年'
			},
			// 获取年报详情
			getReportDeatail: function(ID) {
				this.$.tipLoading('加载中')
				var that = this
				uni.request({
					method: 'POST',
					url: 'https://jizhang.xqyu.cn/index.php/addons/ykquest/survey_api/report_detail',
					dataType: 'json',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						id: ID
					},
					success: function(res) {
						console.log('获取年报详情1111111111111111111111111', res)
						if (res.data.code == 1) {
							that.$.hideLoading()
							// 本年度出游花费情况
							let data1 = []
							let traffic = {
								value: Number(res.data.data[0].traffic),
								name: "交通花费"
							} //交通花费
							let modation = {
								value: Number(res.data.data[0].modation),
								name: "住宿花费"
							} //住宿花费
							let shopping = {
								value: Number(res.data.data[0].shopping),
								name: "购物花费"
							} //购物花费
							let tour = {
								value: Number(res.data.data[0].tour),
								name: "游览花费"
							} //游览花费
							let leisure = {
								value: Number(res.data.data[0].leisure),
								name: "休闲娱乐花费"
							} //休闲娱乐花费
							let catering = {
								value: Number(res.data.data[0].catering),
								name: "餐饮花费"
							} //餐饮花费
							let telecom = {
								value: Number(res.data.data[0].telecom),
								name: "邮电通讯花费"
							} //邮电通讯花费
							let other = {
								value: Number(res.data.data[0].other),
								name: "其它花费"
							} //其它花费
							// 记账情况
							let data2 = []
							let before = {
								value: Number(res.data.data[0].before),
								name: "出行前给旅行社的费用"
							} //出行前给旅行社的费用
							let expenses = {
								value: Number(res.data.data[0].expenses),
								name: "购物花费"
							} //购物花费
							let municat = {
								value: Number(res.data.data[0].municat),
								name: "邮电通讯",
							} //购物花费
							let other_gation = {
								value: Number(res.data.data[0].other_gation),
								name: "其它"
							} //购物花费

							let data3 = [{
									value: Number(res.data.data[0].ziyou_count) || 0,
									name: '自由行次数'
								},
								{
									value: Number(res.data.data[0].cantuanyou_count) || 0,
									name: '参团游次数'
								},

							]
							let data4 = [{
									value: Number(res.data.data[0].ziyou_money) || 0,
									name: '自由行总花费'
								},
								{
									value: Number(res.data.data[0].cantuanyou_money) || 0,
									name: '参团游总花费'
								},

							]

							data1.push(traffic, modation, shopping, tour, leisure, catering, telecom,
								other)
							data2.push(before, expenses, municat, other_gation)
							that.reportDetailData = res.data.data[0]
							console.log('获取最终赋值后的额东西', data1, data2)
							that.hrFun(data1, res.data.data[0].year)
							that.hrFun1(data2, res.data.data[0].year)
							that.hrFun2(data3, res.data.data[0].year)
							that.hrFun3(data4, res.data.data[0].year)


						} else {
							that.$.hideLoading()
						}
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	page {}

	// 设置图表的宽高
	.uni-ec-canvas {
		// width: 600rpx;
		height: 380rpx;
		display: block;
	}

	.container-year {
		background: url(../static/back.jpg);
		background-size: cover;

		.year {

			// height: 90vh;
			.year-content {
				height: 100%;
			}
		}

	}
</style>
